<template>
	<view class="forum-page">
		<u-swiper :list="swiperList" height="290" border-radius="0"></u-swiper>
		
		<view class="tabs-box">
			<u-tabs
				:list="tabList"
				:current="tabCurrent"
				active-color="#348afc"
				inactive-color="#333333"
				bg-color="transparent"
				@change="tabChange"
			></u-tabs>
			
			<view class="post-box" @click="goPost">
				<u-icon name="edit-pen-fill" color="#fff" size="28rpx"></u-icon>
				<view class="text">{{ $t('发帖') }}</view>
			</view>
		</view>

		<view class="list-box">
			<view class="item" v-for="(item, index) in list" :key="item.id" @click="goDetail(item.id)">
				<view class="user">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="name u-line-1">{{ item.name }}</view>
				</view>
				<view class="conent">
					<view class="text u-line-4" v-if="item.content">{{ item.content }}</view>
					<view class="audio" v-if="item.voice" @click.stop="playVoice(item.id, item.voice)">
						<view class="wifi-cont" :class="{ 'animation': playVoiceId === item.id && isAudioPlay }">
							<view class="wifi-circle first"></view>
							<view class="wifi-circle second"></view>
							<view class="wifi-circle third"></view>
						</view>
						<text class="duration">{{ item.voice_time }}"</text>
					</view>
					<view class="bottom">
						<view class="time">{{ item.create_time }}</view>
						<text>{{ $t('回复') }}{{ item.reply_count }}{{ $t('条') }}</text>
					</view>
				</view>
			</view>
			
			<u-empty margin-top="50" v-show="list.length === 0" :text="$t('列表为空')" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		makePhoneCall
	} from '@/common/utils/index';
	import $config from '@/api/http.baseUrl.js'
	export default {
		data () {
			return {
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
				],
				
				tabList: [],
				tabCurrent: 0,
				
				params: {
					type_name: '全部',
					page: 1,
					page_size: 10,
				},
				/* 播放声音 */
				audioContext: null,
				isAudioPlay: false,
				playVoiceId: '',
				last_page: '',
				list:[],
				status: 'loadmore',
			}
		},
		onHide () {
			this.clearVoice()
		},
		onShow() {
			this.getLunbo();
			this.params.page = 1
			this.list = []
			this.status='loadmore'
			this.getForum();
			
			this.tabList = [{
				name: this.$t('全部'),
				label: '全部',
			}, {
				name: this.$t('租房'),
				label: '租房',
			}, {
				name: this.$t('买房'),
				label: '买房',
			}, {
				name: this.$t('雇工'),
				label: '雇工',
			}, {
				name: this.$t('求职'),
				label: '求职',
			}, {
				name: this.$t('土地流转'),
				label: '土地流转',
			}, {
				name: this.$t('土地买售'),
				label: '土地买售',
			}]
		},
		onReachBottom() {
			if (this.last_page > this.params.page) {
				this.status = 'loading'
				this.params.page++
				this.getForum()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			getForum() {
				this.status = 'loading'
				this.$u.api.forum_list(this.params).then(res => {
					this.last_page = res.data.total_page
					this.list = [...this.list, ...res.data.data];
				});
			},
			getLunbo(){
				this.$u.api.lunbo_img().then(res => {
					this.swiperList = res.data
				});
			},
			tabChange (index) {
				this.clearVoice()
				this.tabCurrent = index
				this.params.type_name = this.tabList[index].name
				this.params.page = 1
				this.list = []
				this.status='loadmore'
				this.getForum();
			},
			/* 播放声音 */
			createAudio () {
				this.audioContext = uni.createInnerAudioContext()
				this.audioContext.autoplay = true
				
				this.audioContext.onPlay(() => {
					this.isAudioPlay = true
				})
				this.audioContext.onStop(() => {
					this.isAudioPlay = false
				})
				this.audioContext.onEnded(() => {
					this.isAudioPlay = false
					this.playVoiceId = ''
				})
				this.audioContext.onError((err) => {
					uni.showToast({
						title: '播放失败',
						icon: 'error'
					})
			
					this.isAudioPlay = false
					this.playVoiceId = ''
				})
			},
			playVoice (id, url) {
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.destroy()
					this.audioContext = null
				}

				if (id === this.playVoiceId) {
					this.playVoiceId = ''
					return
				}
			
				this.createAudio()
				console.log(url)
				this.audioContext.src = url
				this.audioContext.play()
				this.playVoiceId = id
			},
			clearVoice () {
				this.isAudioPlay = false
				this.playVoiceId = ''
				
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.destroy()
					
					/* 取消监听音频事件 */
					this.audioContext.offPlay()
					this.audioContext.offPause()
					this.audioContext.offEnded()
					this.audioContext.offError()
					
					this.audioContext = null
				}
			},
			goDetail (forum_id) {
				this.clearVoice()
				uni.navigateTo({
					url: '/pages/forum/detail?forum_id='+forum_id
				})
			},
			goPost () {
				uni.navigateTo({
					url: '/pages/forum/post'
				})
			}
		},
		computed: {
			
		}
	}
</script>

<style lang="scss">
.forum-page {
	min-height: 100vh;
	background-color: #f8f8f8;
	.tabs-box {
		position: sticky;
		top: var(--window-top);
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #f8f8f8;
	}
	.list-box {
		padding: 14rpx 34rpx 34rpx;
		.item {
			padding: 28rpx;
			border-radius: 18rpx;
			background-color: #fff;
			display: flex;
			&:not(:last-child) {
				margin-bottom: 26rpx;
			}
			.user {
				width: 128rpx;
				text-align: center;
				.avatar {
					width: 78rpx;
					height: 78rpx;
					border-radius: 50%;
				}
				.name {
					margin-top: 14rpx;
					color: #666666;
					font-size: 24rpx;
				}
			}
			.conent {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.text {
					color: #333333;
					font-size: 28rpx;
				}
				.audio {
					margin-left: 10rpx;
					padding: 0 24rpx;
					border-radius: 4rpx;
					width: 310rpx;
					height: 58rpx;
					background-color: #f1f1f1;
					display: flex;
					align-items: center;
					position: relative;
					&::after {
						content: '';
						display: block;
						position: absolute;
						left: -10rpx;
						top: 50%;
						width: 20rpx;
						height: 20rpx;
						background-color: #f1f1f1;
						transform: translateY(-50%) rotate(45deg) ;
					}
					.wifi-cont {
						width: 26rpx;
						height: 26rpx;
						position: relative;
						transform: rotate(135deg);
						overflow: hidden;
						&.animation {
							.second {
								animation: fade 1s linear .1s infinite;
							}
							.third {
								animation: fade 1s linear .4s infinite;
							}
						}
						.wifi-circle {
							box-sizing: border-box;
							border: 4rpx solid #333;
							border-radius: 50%;
							position: absolute;
						}
						.first {
							width: 0rpx;
							height: 0rpx;
							left: 18rpx;
							top: 18rpx;
						}
						.second {
							width: 20rpx;
							height: 20rpx;
							left: 12rpx;
							top: 12rpx;
						}
						.third {
							width: 30rpx;
							height: 30rpx;
							left: 6rpx;
							top: 6rpx;
						}
					}
					.duration {
						color: #333;
						font-size: 24rpx;
					}
				}
				.bottom {
					color: #999999;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
	
	@keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	.post-box {
		// position: fixed;
		// top: 610rpx;
		// right: 0;
		// width: 88rpx;
		border-radius: 10rpx;
		margin: 12rpx 20rpx 0;
		height: 88rpx;
		background-color: #348afc;
		display: flex;
		align-items: center;
		justify-content: center;
		.text {
			margin-left: 12rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
}
</style>
